<template>
  <el-timeline-item v-if="activity&&noticeTypesDict" :timestamp="activity.sendTime" placement="top">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tag>{{ noticeTypesDict[activity.type] && noticeTypesDict[activity.type].alias }}</el-tag>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="getDetails(activity)"
        >查看详情</el-button>
      </div>
      <p class="el-card_content">{{ activity.title }}</p>
      <span class="card-span">{{ `发布人：${realName}` }}</span>
    </el-card>
  </el-timeline-item>
</template>
<script>
import { getUserBase } from '@/api/user/userinfo'
export default {
  name: 'NoticeCard',
  props: {
    activity: { type: Object, default: null }
  },
  data: () => ({
    realName: null,
  }),
  computed: {
    noticeTypesDict() {
      return this.$store.state.notice.noticeTypesDict
    }
  },
  watch: {
    activity: {
      handler(val) {
        if (!val) return
        getUserBase(val.from).then(data => {
          this.realName = data.base.realName
        })
      },
      immediate: true
    }
  },
  methods: {
    getDetails() {
      this.$emit('getDetails')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card_content {
  text-indent:1rem;
}
.card-span {
  display: block;
  text-align: right;
  color: #c0c4cc;
}
</style>
